<template>
  <div class="party-container">
    <div class="party-header">
      <h1>党建工作</h1>
      <div class="breadcrumb">
        <router-link to="/">首页</router-link> / 党建工作
      </div>
    </div>
    
    <div class="party-content">
      <div class="party-section">
        <h2>党建动态</h2>
        <div class="news-list">
          <div class="news-item" v-for="(item, index) in partyNews" :key="index">
            <div class="news-date">{{ item.date }}</div>
            <div class="news-info">
              <h3>{{ item.title }}</h3>
              <p>{{ item.summary }}</p>
              <div class="news-image" v-if="item.image">
                <img :src="item.image" :alt="item.title">
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="party-section">
        <h2>组织建设</h2>
        <div class="organization">
          <div class="org-intro">
            <p>中空领航党委下设3个党支部，现有党员48人。公司党委坚持以习近平新时代中国特色社会主义思想为指导，全面贯彻落实党的路线方针政策，充分发挥企业党组织的政治核心作用，把方向、管大局、保落实，推动企业高质量发展。</p>
          </div>
          <div class="org-structure">
            <img src="https://picsum.photos/800/400?random=46" alt="组织结构图">
          </div>
        </div>
      </div>
      
      <div class="party-section">
        <h2>党员风采</h2>
        <div class="member-showcase">
          <div class="member-card" v-for="(member, index) in partyMembers" :key="index">
            <div class="member-photo">
              <img :src="member.photo" :alt="member.name">
            </div>
            <div class="member-info">
              <h3>{{ member.name }}</h3>
              <p class="member-title">{{ member.title }}</p>
              <p class="member-quote">"{{ member.quote }}"</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="party-section">
        <h2>学习教育</h2>
        <div class="learning-education">
          <div class="edu-content">
            <p>中空领航党委高度重视党员学习教育工作，通过"三会一课"、主题党日、专题培训等多种形式，持续深入学习贯彻习近平新时代中国特色社会主义思想，不断提高党员干部的政治素养和业务能力。</p>
            <div class="edu-activities">
              <div class="activity" v-for="(activity, index) in learningActivities" :key="index">
                <div class="activity-icon"><i class="el-icon-reading"></i></div>
                <div class="activity-info">
                  <h4>{{ activity.title }}</h4>
                  <p>{{ activity.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Party',
  data() {
    return {
      partyNews: [
        {
          date: '2023-09-28',
          title: '中空领航党委组织开展"喜迎国庆"主题党日活动',
          summary: '为喜迎国庆74周年，弘扬爱国主义精神，9月28日，中空领航党委组织全体党员开展"喜迎国庆"主题党日活动，共同回顾党的光辉历程，讴歌祖国伟大成就。',
          image: 'https://picsum.photos/600/300?random=40'
        },
        {
          date: '2023-07-01',
          title: '中空领航召开庆祝建党102周年暨"两优一先"表彰大会',
          summary: '七月一日，中空领航召开庆祝中国共产党成立102周年暨"两优一先"表彰大会，表彰先进基层党组织、优秀共产党员和优秀党务工作者，激励全体党员不忘初心、牢记使命，为公司发展贡献力量。',
          image: 'https://picsum.photos/600/300?random=41'
        },
        {
          date: '2023-05-15',
          title: '中空领航党支部赴红色教育基地开展主题党日活动',
          summary: '为传承红色基因，弘扬革命精神，中空领航党支部组织党员赴革命传统教育基地开展"传承红色基因，践行初心使命"主题党日活动，重温入党誓词，接受革命传统教育。',
          image: 'https://picsum.photos/600/300?random=42'
        }
      ],
      partyMembers: [
        {
          name: '李明',
          title: '技术研发部党支部书记',
          photo: 'https://picsum.photos/120/120?random=43',
          quote: '身为一名党员，要把初心和使命转化为攻坚克难、干事创业的实际行动，在技术创新中践行党员责任。'
        },
        {
          name: '张华',
          title: '优秀共产党员',
          photo: 'https://picsum.photos/120/120?random=44',
          quote: '我将以党员标准严格要求自己，发挥先锋模范作用，为公司发展贡献自己的力量。'
        },
        {
          name: '王强',
          title: '项目管理中心党支部委员',
          photo: 'https://picsum.photos/120/120?random=45',
          quote: '作为一名基层党员，要把党的先进理念融入到日常工作中，为客户提供更优质的服务。'
        }
      ],
      learningActivities: [
        {
          title: '党委中心组学习',
          description: '定期组织党委中心组学习，深入学习贯彻习近平新时代中国特色社会主义思想和党的二十大精神。'
        },
        {
          title: '"三会一课"制度',
          description: '严格执行"三会一课"制度，通过党员大会、党支部委员会、党小组会和党课等形式，强化党员教育管理。'
        },
        {
          title: '专题培训',
          description: '针对不同层级党员干部，开展分层分类培训，提高党性修养和业务能力。'
        },
        {
          title: '主题党日活动',
          description: '每月开展形式多样的主题党日活动，增强党组织凝聚力和战斗力。'
        }
      ]
    };
  }
}
</script>

<style scoped>
.party-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.party-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.party-header h1 {
  font-size: 28px;
  color: #d32f2f; /* 党建红 */
  margin-bottom: 10px;
}

.breadcrumb {
  font-size: 14px;
  color: #666;
}

.breadcrumb a {
  color: #0056b3;
  text-decoration: none;
}

.party-section {
  margin-bottom: 40px;
}

.party-section h2 {
  font-size: 22px;
  color: #d32f2f; /* 党建红 */
  margin-bottom: 20px;
  padding-left: 15px;
  position: relative;
}

.party-section h2:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: #d32f2f;
}

/* 党建动态 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.news-item {
  display: flex;
  border-bottom: 1px dashed #eaeaea;
  padding-bottom: 25px;
}

.news-date {
  width: 100px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 10px;
  font-size: 16px;
  color: #666;
  border-left: 3px solid #d32f2f;
}

.news-info {
  flex: 1;
  padding-left: 20px;
}

.news-info h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.news-info p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.news-image {
  margin-top: 15px;
}

.news-image img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 4px;
}

/* 组织建设 */
.organization {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.org-intro p {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.org-structure {
  text-align: center;
}

.org-structure img {
  max-width: 100%;
  border-radius: 4px;
}

/* 党员风采 */
.member-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.member-card {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  transition: all 0.3s;
  text-align: center;
}

.member-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.member-photo {
  width: 120px;
  height: 120px;
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #d32f2f;
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.member-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.member-quote {
  font-size: 14px;
  color: #555;
  font-style: italic;
  line-height: 1.6;
}

/* 学习教育 */
.learning-education {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.edu-content p {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.edu-activities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.activity {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
}

.activity-icon {
  width: 50px;
  height: 50px;
  background-color: rgba(211, 47, 47, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.activity-icon i {
  font-size: 24px;
  color: #d32f2f;
}

.activity-info h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.activity-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .member-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .edu-activities {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .news-item {
    flex-direction: column;
  }
  
  .news-date {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .news-info {
    padding-left: 0;
  }
  
  .member-showcase {
    grid-template-columns: 1fr;
  }
}
</style> 